<template>
    <div class="category-container">
      <div 
        v-for="category in categories" 
        :key="category.id"
        class="category-item"
      >
        <single-category
          :category="category"
          @click="handleItemClick"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from "vue";
  import SingleCategory from "./SingleCategory.vue";
  
  const props = defineProps({
    categories: {
      type: Array,
      required: true,
      validator: (list) => {
        return list.every(
          (item) =>
            item &&
            typeof item.id === "number" &&
            typeof item.name === "string" &&
            Array.isArray(item.emojiList)
        );
      },
    },
  });
  
  const emit = defineEmits(["item-click"]);
  
  const handleItemClick = (category) => {
    emit("item-click", category);
  };
  </script>
  
  <style lang="less" scoped>
  .category-container{
    width:100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  </style>